<template>
	<view>
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" left-icon="back" statusBar="true" title="我的租借"></uni-nav-bar>
		
		<!-- 没有东西 -->
		<view class=" canui-kong" v-if="rentList.length===0&&hasLogin">
		    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
		        <text class="cuIcon-cart text-white"></text>
		    </view>
				 
		    <view class="text-lg  flex justify-center align-center">
		        <text class="text-grey">此处空空如也~</text>
		    </view>
		</view>
		
		<!-- 没有登录 -->
		<view class="canui-kong" v-if="!hasLogin">
		    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
		        <text class="cuIcon-weixin text-white"></text>
		    </view>
				 
		    <view class="text-sm  flex justify-center align-center">
		        <text class="text-grey text-lg">请先登录~</text>
		    </view>
		</view>
				
		<view class="" v-for="(item,index) in rentList" :key="index">
			<view class="cu-list menu margin-top-sm" style="border-left: rgb(231,173,33) solid 10rpx;">
				<view class="cu-item flex justify-between" style="padding-left: 10rpx;">
					<view class="">
						订单号：
						<text>{{item.orderId}}</text>
					</view>
					 <!-- 未租借0/正在租借1/退租审核中2/退租成功3/直接买下4 -->
					<view class="text-yellow" v-if="item.orderState == 4">
						押金
						<text class="" style="padding-left: 10rpx;">
							<text>{{item.orderPrice}}</text>
							元</text>
					</view>
					<view class="text-brown" v-if="item.orderState == 0">
						押金-待支付
						<text class="" style="padding-left: 10rpx;">{{item.orderPrice}}元</text>
					</view>
					<!-- <view class="text-red" v-if="item.orderState === 2">
						正在审核
					</view> -->
					<view class="text-green" v-if="item.orderState == 5 ">
						已完成
						<text class="text-price" style="padding-left: 10rpx;">{{item.orderPrice}}元</text>
					</view>
				</view>
				<!-- 0757-82120148 -->
				<view class="cu-item padding-top-sm padding-bottom" style="padding-left: 10rpx; padding-bottom: 10rpx;">
					<view class="flex align-end">
						<view v-for="(v) in item.orderBooks" class="bg-img" style="margin-right: 10rpx;">
							<image class="solids" style="width: 100rpx;height: 150rpx;" :src="v.book.img"></image>
						</view>
						<!-- <view class="bg-img" style="margin-right: 10rpx;">
							<image class="solids" style="width: 90rpx;height: 150rpx;" src="https://s1.ax1x.com/2020/09/11/wtij4U.png"></image>
						</view>
						<view class="bg-img" style="margin-right: 10rpx;">
							<image class="solids" style="width: 90rpx;height: 150rpx;" src="https://s1.ax1x.com/2020/09/11/wtij4U.png"></image>
						</view>
						<view class="cuIcon-more"></view> -->
					</view>
					<view class="flex flex-direction align-end">
						<view class="">
							<text>共
							<text>{{item.orderBooks.length}}</text>
							件商品</text>
						</view>	
						<view class="" v-if="item.orderState == 4">
							<text>已租借</text>
							<text class="text-yellow">{{item.rentedDay}}</text>
							<text>天</text>
							<text class="text-yellow">{{item.rentedHour}}</text>
							<text>时</text>
							<text class="text-yellow">{{item.rentedMinute}}</text>
							<text>分</text>
						</view>
						<view class="text-gray" v-if="item.orderState == 4">
							<text>{{item.orderTime.format('yyyy-MM-dd')}}</text>
						</view>
						<!-- 未租借0/正在租借1/退租审核中2/退租成功3/直接买下4 -->
						<view class="flex margin-top-sm" v-if="item.orderState == 4">
							<button class="cu-btn sm bg-yellow text-white" @tap="handleReturn($event,index)" data-target="DialogModal" style="margin-right: 5rpx;">还书退押</button>
							<button class="cu-btn sm bg-yellow text-white" @click="handleBuy(index)" style="margin-right: 5rpx;">直接买下</button>
						</view>
						<view class="flex margin-top-sm" v-if="item.orderState == 5">
							<button class="cu-btn sm bg-yellow text-white" @click="handlePay(index)" style="margin-right: 5rpx;">去支付</button>
						</view>
						<!-- <view class="flex margin-top-sm">
							<button class="cu-btn sm bg-grey text-white" style="margin-right: 5rpx;">已选择退还押金</button>
						</view> -->
						<!-- <view class="flex margin-top-sm" v-if="item.orderState === 4">
							<button class="cu-btn sm bg-grey text-white" style="margin-right: 5rpx;">已选择直接买下</button>
						</view> -->
					</view>
							
				</view>
			</view>
		</view>
		<!-- 还书退押 -->	
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content text-yellow">提示</view>
					<!-- <view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view> -->
				</view>
				<view class="padding-xl flex flex-direction">
					<view class="flex justify-between">
						<image src="../../static/images/pay/订单提示.png" mode="widthFix" style="width: 30px; height: 30px;"></image>
						<view class="flex flex-direction align-start">
							<view>您的租书订单<text class="text-yellow">{{tips.orderId}}</text></view>
							<view class="">
								<text>已租借</text>
								<text class="text-yellow">{{tips.rentedDay}}</text>
								<text>天</text>
								<text class="text-yellow">{{tips.rentedHour}}</text>
								<text>时</text>
								<text class="text-yellow">{{tips.rentedMinute}}</text>
								<text>分</text>
							</view>
							
						</view>
					</view>
					
					
					<view class=" margin-top flex flex-direction align-end">
						<view class="">
							<text>-应付</text>
							<text class="text-red">{{tips.orderPrice}}</text>
							<text>元</text>
						</view>
						<view class="">
							<text>-已付押金</text>
							<text class="text-red">55.0</text>
							<text>元</text>
						</view>
						<view class="">
							<text>-实际退还</text>
							<text class="text-red">38.5</text>
							<text>元</text>
						</view>
						
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 text-lg flex-sub text-yellow solids-right" @tap="hideModal">取消</view>
					<view class="action margin-0 text-lg flex-sub text-yellow " @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
		
		<view class="" style="height:180rpx;"></view>
		<!-- <myTabBar @setCurPage="setCurPage" :tabBar="tabBar" :curPage="curPage"></myTabBar>		 -->
	</view>
</template>

<script>
	//todo:动态数据获取
	import {mapState,mapMutations} from 'vuex';
	import {queryOrdersByUser} from '../../request/handleReq.js';
	var _self;
	export default {
		computed:mapState(['hasLogin']),
		data() {
			return {
				// 未租借0/正在租借1/退租审核中2/退租成功3/直接买下4
				curPage:'my',
				modalName: null,
				rentList:[],
				tips:{}
				// rentList:[
				// 	{
				// 		orderState:0,
				// 		orderId:'04460002020082400001',
				// 		orderPrice:'55.00',
				// 		orderNums:4,
				// 		orderTime:'2020-8-24'
				// 	},
				// 	{
				// 		orderState:1,
				// 		orderId:'04460002020082400001',
				// 		orderPrice:'255.00',
				// 		orderNums:5,
				// 		orderTime:'2020-8-24'
				// 	},
				// 	{
				// 		orderState:2,
				// 		orderId:'04460002020082400001',
				// 		orderPrice:'555.00',
				// 		orderNums:4,
				// 		orderTime:'2020-8-24'
				// 	},
				// 	{
				// 		orderState:3,
				// 		orderId:'04460002020082400001',
				// 		orderPrice:'5.00',
				// 		orderNums:4,
				// 		orderTime:'2020-8-24'
				// 	},
				// 	{
				// 		orderState:4,
				// 		orderId:'04460002020082400001',
				// 		orderPrice:'0.00',
				// 		orderNums:4,
				// 		orderTime:'2020-8-24'
				// 	}
				// ]
			}
		},
		
		mounted() {
			if(this.hasLogin){
				queryOrdersByUser().then(res => {
					// console.log(res);
					let currentTime = new Date().getTime();
					// res.forEach(item => {
					// 	if(item.order_type == 1){
					// 		let orderTime = new Date(item.create_time);
					// 		let total = (currentTime - orderTime.getTime());
					// 		let day = Math.floor(total / (24*3600*1000));		//计算整数天数
					// 		if(day < 0){
					// 			day = 0;
					// 		}
					// 		let afterDay = total % (24 * 3600 * 1000);	//取得算出天数后剩余的毫秒数
					// 		let hour = Math.floor(afterDay / (3600*1000)); 	//计算整数小时数
					// 		if(hour < 0){
					// 			hour = 0;
					// 		}
					// 		let afterHour = afterDay % (3600 * 1000);	//取得算出小时数后剩余的毫秒数
					// 		let minute = Math.floor(afterHour/(60 * 1000));
					// 		if(minute < 0){
					// 			minute = 0;
					// 		}
					// 		// console.log(new Date(item.create_time));
					// 		this.rentList.push({
					// 			orderId:item.order_id,
					// 			orderState:item.order_status,
					// 			orderPrice:item.money,
					// 			orderTime:orderTime,
					// 			rentedDay:day,
					// 			rentedHour:hour,
					// 			rentedMinute:minute,
					// 			orderBooks:item.books
					// 		})
					// 	}
					// })
					this.rentList = res.filter(item=>item.order_type == 1).map(x=>{
						let orderTime = new Date(x.create_time);
						let total = (currentTime - orderTime.getTime());
						let day = Math.floor(total / (24*3600*1000));		//计算整数天数
						if(day < 0){
							day = 0;
						}
						let afterDay = total % (24 * 3600 * 1000);	//取得算出天数后剩余的毫秒数
						let hour = Math.floor(afterDay / (3600*1000)); 	//计算整数小时数
						if(hour < 0){
							hour = 0;
						}
						let afterHour = afterDay % (3600 * 1000);	//取得算出小时数后剩余的毫秒数
						let minute = Math.floor(afterHour/(60 * 1000));
						if(minute < 0){
							minute = 0;
						}
						return{
							orderId:x.order_id,
							orderState:x.order_status,
							orderPrice:x.money,
							orderTime:orderTime,
							rentedDay:day,
							rentedHour:hour,
							rentedMinute:minute,
							orderBooks:x.books
						}
					})
					console.log(this.rentList);
				}).catch(reason => {
					uni.showModal({
						title: '错误',
						content: reason,
						mask: true,
						showCancel: false
					});
				})
			}
			
		},
		
		methods: {
			handleBuy(index){
				console.log("buy");
			},
			handlePay(index){
				console.log("pay");
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleReturn(e,index) {
				// console.log(e,index);
				this.tips = this.rentList[index]
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			setCurPage(e) {
				uni.reLaunch({
					url:'../'+e+'/'+e
				})
				// this.curPage = e;
				
			},
		}
	}
</script>

<style>

</style>
